<template id="section-attatchment">
  <div>
    <el-tabs v-model="activeName" @tab-click='handleTabClick'>
      <el-tab-pane label="教案" name="教案" key="j">
        <el-scrollbar>
          <div  v-for="atta in jaAtta">
            <span>{{atta.displayName}}</span>
            <el-button
              type="text"
              size="mini"
              @click="preview(atta)">
              预览
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="preview(atta)">
              预览
            </el-button>
            <el-button v-if="teacherOpeSet"
                       type="text"
                       size="mini"
                       @click="rm(atta)">
              移除
            </el-button>
          </div>
        </el-scrollbar>
      </el-tab-pane>

      <el-tab-pane label="课件" name="课件" key="k">
        <el-scrollbar>
          <div  v-for="atta in kjAtta">
            <span>{{atta.displayName}}</span>
            <el-button
              type="text"
              size="mini"
              @click="preview(atta)">
              预览
            </el-button>
            <el-button v-if="teacherOpeSet"
                       type="text"
              size="mini"
              @click="rm(atta)">
              移除
            </el-button>
          </div>
        </el-scrollbar>
      </el-tab-pane>

      <el-tab-pane label="案例" name="案例" key="a">
        <el-scrollbar>
          <div  v-for="atta in anliAtta">
            <span>{{atta.displayName}}</span>
            <el-button
              type="text"
              size="mini"
              @click="preview(atta)">
              预览
            </el-button>
            <el-button v-if="teacherOpeSet"
                       type="text"
                       size="mini"
                       @click="rm(atta)">
              移除
            </el-button>
          </div>
        </el-scrollbar>
      </el-tab-pane>

      <el-tab-pane label="其他" name="其他" key="z">
        <el-scrollbar>
          <div  v-for="atta in zlAtta">
            <span>{{atta.displayName}}</span>
            <el-button
              type="text"
              size="mini"
              @click="preview(atta)">
              预览
            </el-button>
            <el-button v-if="teacherOpeSet"
                       type="text"
                       size="mini"
                       @click="rm(atta)">
              移除
            </el-button>
          </div>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
    <el-upload v-if="teacherOpeSet"
               class="avatar-uploader"
      :action="upUrl"
      :headers="upheaders"
      :multiple="false"
      :show-file-list="false"
               :before-upload="beforeAvatarUpload"
      :on-success="handleAvatarSuccess"
      >
      上传{{activeName}}
    </el-upload>
    <el-dialog
      :title="docPreview.srcName"
      :visible.sync="docPreview.on"
      width="80%"
    >
      <docpreview v-if="docPreview.on" @previewFail="closePreview" :srcUrl="docPreview.srcUrl" :srcName="docPreview.srcName">
      </docpreview>
    </el-dialog>

  </div>
</template>

<script>
import sectiontree from '@/api/sectiontree.js'
import docpreview from '@/components/docpreview'
export default {
    name: 'SectionAttatchment',
    props: {
      teacherOpeSet: {
        type: Boolean
      },
      sectionId: {
        type: Number,
        required: true
      },
    },
    data() {
      return {
        upUrl: process.env.VUE_APP_COURSE_BASE_URL + '/api/osa/upload',
        kjAtta: [],
        zlAtta: [],
        jaAtta: [],
        anliAtta: [],
        activeName: '课件',
        activeCatalog: 'k',
        upheaders: {
          authorization: localStorage.getItem('authorization')
        },
        docPreview: {
          on: false,
          srcUrl: "",
          srcName: ""
        }

      };
    },
    components: {
      docpreview,
    },
    mounted() {
        this.loadAttachmentList(this.sectionId);
    },
    methods: {
      handleTabClick(target, action) {
        console.log('handleTabClick: ', target)
        this.activeCatalog = target.$vnode.key

      },
      preview(atta){
        this.docPreview.srcName = atta.displayName.toLowerCase();
        this.docPreview.srcUrl = process.env.VUE_APP_COURSE_BASE_URL + atta.url;
        this.docPreview.on = true;
        console.log("PA preview:", this.docPreview)

      },
      rm(atta) {
        sectiontree.unbondSectionMaterial({
          sectionId: atta.sectionId,
          id: atta.id
        }).then(resp => {
          this.loadAttachmentList()
        });
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 100;
        if (!isLt2M) {
          this.$message.error('上传附件大小不能超过 100MB!');
          return false;
        }
      },
      handleAvatarSuccess(resp) {
        sectiontree.bondSectionMaterial({
          sectionId: this.sectionId,
          catalog: this.activeCatalog,
          displayName: resp.data.originName,
          url: resp.data.url
        }).then(bondResp => {
          this.loadAttachmentList()
        })
      },
      loadAttachmentList() {
        console.log('loadAttachmentList:', this.sectionId);
        sectiontree.listSectionMaterial({sectionId: this.sectionId, catalog: 'k'}).then(resp => {
          this.kjAtta = resp.data
        });
        sectiontree.listSectionMaterial({sectionId: this.sectionId, catalog: 'z'}).then(resp => {
          this.zlAtta = resp.data
        });
        sectiontree.listSectionMaterial({sectionId: this.sectionId, catalog: 'j'}).then(resp => {
          this.jaAtta = resp.data
        });
        sectiontree.listSectionMaterial({sectionId: this.sectionId, catalog: 'a'}).then(resp => {
          this.anliAtta = resp.data
        });
      },
      closePreview() {
        this.docPreview.on = false;
      },
    }
  };
</script>


